<template>
	<div class="row" id="chart1">
	</div>
</template>

<script>
	import * as echarts from "echarts"
	export default {
		name: "item",
		data() {
			return {

			}
		},
		mounted() {
			this.getInit()
		},
		methods: {
			getInit() {
				var mapChart = echarts.init(document.getElementById('chart1'));
				const data = [{
						name: '建设工程',
						count: 36
					},
					{
						name: '政府采购',
						count: 15
					},
					{
						name: '国有产权',
						count: 18
					},
					{
						name: '土地矿业',
						count: 38
					}
				]
				const xData = data.map(item => item.name)
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer:{
							type:'shadow'
						}
					},
					grid: {
						top: '15%',
						bottom: '15%',
						left: '8%',
						right: '5%'
					},
					xAxis: {
						data: xData,
						axisLine: {
							show: true,
							lineStyle: {
								color: '#1B7EF2',
								width: 1
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: 13,
							color: '#D7E7FF',
							interval: 0
						}
					},
					yAxis: {
						type: 'value',
						name: '天',
						nameTextStyle: {
							fontSize: 12,
							fontWeight: 400,
							color: 'rgba(181, 217, 255, .5)',
							align:'left',
							padding:[0,0,0,-20],
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#D7EEFE',
								width: 1
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(14, 73, 167, .5)',
								type: 'dashed',
								width: 1
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: 14,
							color: '#B5D9FF',
							fontFamily: 'DIN-Bold'
						}
					},
					series: [{
						type: 'bar',
						barWidth: 27,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#04CEF7'
								},
								{
									offset: 1,
									color: '#1263FF'
								}
							])
						},
						label: {
							show: true, // 显示标签
							position: 'top', // 标签位置
							color: '#00EAFE', // 标签文字颜色
							fontSize: 14,
							fontFamily: 'DIN-Bold'
						},
						data: data.map(item => item.count) // 使用 count 作为数据值
					}]
				}
				mapChart.setOption(option, true)

				window.addEventListener('resize', () => {
					mapChart.resize();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.row {
		height: 100%;
	}
</style>
